<template>
    <div class="divBox">
        <el-card class="box-card">
            <div class="clearfix">
                <el-tabs v-if="headTab.length > 0" v-model="currentTab">
                    <el-tab-pane
                    v-for="(item, index) in headTab"
                    :key="index"
                    :name="item.name"
                    :label="item.title"
                    />
                </el-tabs>
            </div>
            <el-form
              ref="formValidate"
              :key="currentTab"
              v-loading="fullscreenLoading"
              class="formValidate mt20"
              :rules="ruleValidate"
              :model="formValidate"
              label-width="130px"
              @submit.native.prevent
            >
              <el-row v-if="currentTab == '1'" :gutter="24">
                <el-col :span="12">
                  <el-form-item label="选择景区地址：" prop="searTemp">
                    <el-autocomplete
                    v-model="formValidate.searTemp"
                    prefix-icon="el-icon-search"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入景区名称搜索高德景点"
                    style="width: 600px;"
                    @select="handleSelectStart"
                  >
                    <template slot-scope="{ item }">
                      <div class="name" >
                       <span> {{item.pname}}-{{item.cityname}}-{{item.adname}}-{{ item.name }} </span>
                       <span v-if="item.biz_type=='tour'" class="idcard-tip">旅游景点</span>
                       <span v-if="item.photos.length"  class="idcard-tip">含图片</span>
                      </div>
                    </template>
                  </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="景点名称：" prop="name">
                    <el-input
                      v-model="formValidate.name"
                      placeholder="请输入景点名称"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
               
                <el-col :span="12">
                  <el-form-item label="所属省：" prop="province">
                    <el-input
                      v-model="formValidate.province"
                      placeholder="请输入所属省(贵州)"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属城市：" prop="city">
                    <el-input
                      v-model="formValidate.city"
                      placeholder="请输入所属城市(贵阳)"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属区域：" prop="county">
                    <el-input
                      v-model="formValidate.county"
                      placeholder="请输入所属城市(花溪区)"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="地点：" prop="address">
                    <el-input
                      v-model="formValidate.address"
                      placeholder="地点"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="景区经纬度：" prop="address">
                    <el-input
                      v-model="formValidate.gcj_lng_lat"
                      placeholder="景区经纬度"
                      size="small"
                      class="pageWidth"
                      disabled
                    />
                    <el-button
                      type="primary"
                      class="uploadVideo"
                      size="small"
                      @click="selectLngLat"
                    >
                      选择经纬度
                    </el-button>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="景点分类：">
                    <el-cascader
                      v-model="formValidate.label_ids"
                      class="pageWidth"
                      size="small"
                      :options="labelList"
                      :props="{multiple:true,checkStrictly:true,emitPath:false }"
                      filterable
                      clearable
                    />
                  </el-form-item>
                  
                </el-col>
                <el-col :span="12">
                  <el-form-item label="排序：">
                    <el-input-number :min="0" v-model="formValidate.sort" label="排序" />
                  </el-form-item>
                  
                </el-col>
                
                <el-col  :span="12">
                  <el-form-item label="是否免门票：">
                    <el-switch
                      v-model="formValidate.is_free"
                      :active-value="1"
                      :inactive-value="0"
                      :width="55"
                      active-text="开启"
                      inactive-text="关闭"
                    />
                  </el-form-item> 
                </el-col>
                <el-col :span="12" v-if="formValidate.is_free==0">
                  <el-form-item label="门票价格：" prop="cost">
                    <el-input
                      v-model="formValidate.cost"
                      type="number"
                      placeholder="门票价格："
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col  :span="12">
                  <el-form-item label="景区等级：">
                    <el-select
                      v-model="formValidate.grade"
                      size="small"
                      placeholder="请选择"
                      class="pageWidth"
                    >
                      <el-option
                        v-for="item in gradeList"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="formValidate.is_free==0">
                  <el-form-item label="景点评分：" prop="rate">
                    <el-input
                      v-model="formValidate.rate"
                      type="number"
                      placeholder="门票价格："
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="景点联系电话：" prop="scenic_mobile">
                    <el-input
                      v-model="formValidate.scenic_mobile"
                      placeholder="请输入景点联系电话(多个电话请用;分割)"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="景点特色：" prop="trait">
                    <el-input
                      v-model="formValidate.trait"
                      placeholder="例：纵然山水间，悠然心体验"
                      size="small"
                      class="pageWidth"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="景点简介：" prop="scenic_info">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入景点简介"
                      class="pageWidth"
                      size="small"
                      v-model="formValidate.scenic_info"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="景点封面图：" prop="image">
                    <div
                      class="upLoadPicBox"
                      title="750*750px"
                      @click="modalPicTap('1')"
                    >
                      <div v-if="formValidate.image" class="pictrue">
                        <img :src="formValidate.image">
                      </div>
                      <div v-else class="upLoad">
                        <i class="el-icon-camera cameraIconfont" />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="景点轮播图：" prop="slider_image">
                    <div class="acea-row">
                      <div
                        v-for="(item, index) in formValidate.slider_image"
                        :key="index"
                        class="pictrue"
                        draggable="false"
                        @dragstart="handleDragStart($event, item)"
                        @dragover.prevent="handleDragOver($event, item)"
                        @dragenter="handleDragEnter($event, item)"
                        @dragend="handleDragEnd($event, item)"
                      >
                        <img :src="item">
                        <i
                          class="el-icon-error btndel"
                          @click="handleRemove(index)"
                        />
                      </div>
                      <div
                        v-if="formValidate.slider_image.length < 10"
                        class="uploadCont"
                        title="750*750px"
                      >
                        <div class="upLoadPicBox" @click="modalPicTap('2')">
                          <div class="upLoad">
                            <i class="el-icon-camera cameraIconfont" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="主图视频：" prop="video_link">
                    <el-input
                      v-model="videoLink"
                      size="small"
                      class="perW50"
                      placeholder="请输入MP4格式的视频链接"
                    />
                    <input
                      ref="refid"
                      type="file"
                      style="display: none;"
                      @change="zh_uploadFile_change"
                    >
                    <el-button
                      type="primary"
                      icon="ios-cloud-upload-outline"
                      class="uploadVideo"
                      size="small"
                      @click="zh_uploadFile"
                    >
                      {{ videoLink ? "确认添加" : "上传视频" }}
                    </el-button>
                    <el-col :span="12">
                      <el-progress
                        v-if="upload.videoIng"
                        :percentage="progress"
                        :text-inside="true"
                        :stroke-width="20"
                        style="margin-top: 10px;"
                      />
                    </el-col>
                    <el-col :span="24">
                      <div v-if="formValidate.video_link" class="iview-video-style">
                        <video
                          style="width:100%;height: 100%!important;border-radius: 10px;"
                          :src="formValidate.video_link"
                          controls="controls"
                        >
                          您的浏览器不支持 video 标签。
                        </video>
                        <div class="mark" />
                        <i class="el-icon-delete iconv" @click="delVideo" />
                      </div>
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="currentTab == '2'" :gutter="24">
                <!-- <el-col :span="24">
                  <el-form-item  label="开放时间：" prop="open_time">
                    <div  style="margin-bottom:20px" v-for="(item, index) in formValidate.open_time" :key="index" >
                      <el-input  v-model="item.date"  placeholder="请输入开放日期(例:1月1号~10月-10号)"  style="width:300px;" />
                      <el-input style="margin-left:20px;width: 200px;" v-model="item.time"  placeholder="请输入时间段(例:07:00-19:00)"   />
                      <el-button style="margin-left:20px" type="danger" size="mini" @click.prevent="removeItem(item)">删除</el-button>
                    </div>
                    <el-button type="success"  size="mini" @click="addItem">新增开放时间</el-button>
                  </el-form-item>
                </el-col> -->
                <!-- <el-col :span="24">
                  <el-form-item label="开放时间补充说明：">
                    <el-input v-model="formValidate.open_time_desc" type="textarea" :rows="3" placeholder="请输入补充说明" style="width:500px;" />
                  </el-form-item>
                </el-col > -->
                <el-col :span="24">
                  <el-form-item label="开放时间："  prop="open_time">
                    <vue-ueditor-wrap v-model="formValidate.open_time" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 70%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col >
                <el-col :span="24">
                  <el-form-item label="优待政策："  prop="special_policy">
                    <vue-ueditor-wrap v-model="formValidate.special_policy" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 70%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col >
              </el-row> 
              <el-row v-if="currentTab == '3'" :gutter="24">
                
                <el-col  :span="24">
                  <el-form-item  label="景点设施：">
                    <div  style="margin-bottom:20px;display: flex;align-items: center" v-for="(item, index) in formValidate.scenic_facility" :key="index" >
                      <div class="pictrueBox" >
                        <div style="margin-top:10px" v-if="item.image">
                          <img v-lazy="item.image" style="width: 20px;height:20px" />
                          <el-input
                            v-model="item.image"
                            style="display: none"
                          ></el-input>
                        </div>
                        <div style="display: flex; align-items: center" v-else>
                          <el-input
                            v-model="item.image"
                            style="display: none"
                          ></el-input>
                          <i class="el-icon-camera cameraIconfont" />
                        </div>
                      </div>
                      <el-input style="margin-left:20px;width:150px" v-model="item.text"  placeholder="请输入服务设施名称"  />
                      <el-button  style="margin-left:20px" type="danger" size="mini"  @click.prevent="removeItemFac(item)">删除</el-button >
                    </div>
                    <el-button type="success" size="mini" @click="addFac">新增景点设施</el-button >
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="交通信息：" >
                    <vue-ueditor-wrap v-model="formValidate.to_scenic" @beforeInit="addCustomDialog" :config="myConfig2"  style="width: 90%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="停车场：" >
                    <vue-ueditor-wrap v-model="formValidate.scenic_park" @beforeInit="addCustomDialog" :config="myConfig2"  style="width: 90%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="游玩须知：" >
                    <vue-ueditor-wrap v-model="formValidate.scenic_help" @beforeInit="addCustomDialog" :config="myConfig2"  style="width: 90%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col>
                <el-col  :span="24">
                  <el-form-item label="重要通告：" >
                    <vue-ueditor-wrap v-model="formValidate.notice" @beforeInit="addCustomDialog" :config="myConfig2"  style="width: 90%" ></vue-ueditor-wrap>
                  </el-form-item>
                </el-col>
              </el-row> 
              <el-row v-if="currentTab == '4'" :gutter="24">
                <el-col :span="24">
                  <el-form-item  label="景点详情："  prop="scenic_detail">
                    <vue-ueditor-wrap v-model="formValidate.scenic_detail" @beforeInit="addCustomDialog" :config="myConfig"  style="width: 90%" ></vue-ueditor-wrap>
                  </el-form-item >
                </el-col>
              </el-row>
              <el-row v-if="currentTab == '5'" :gutter="24">
                <el-col :span="24">
                  <el-form-item  label="套餐设置：" prop="mealList">
                    <div style="display: none;">{{flag}}</div>
                    <div  v-if="mealList.length" style="display:flex;align-items:center;padding-top: 50px;" v-for="(item, index) in mealList" :key="index" >
                      <div>
                        <i class="el-icon-circle-close" @click="delMeal(index)"></i>
                        <el-input  v-model="item.meal_name"  placeholder="套餐(例：景点门票)"  style="width:150px;" />
                      </div>
                      <div>
                        <div  v-for="(detail , indexd) in item.details" :key="indexd"  style="display:flex;align-items:center;margin-top:30px" >
                          <el-input style="margin-left:20px;width: 200px;" v-model="detail.scenic_product_name"  placeholder="景点内展示名称"   />
                          <div class="ml10">
                            <div v-if="detail.product_id" class="acea-row row-middle">
                              <el-tag
                                closable
                                size="medium"
                                :disable-transitions="false"
                                class="mb5 mr10 move-icon"
                                style="cursor: pointer;"
                                @close="delOneProduct(index, indexd)"
                              >{{detail.product_id +'-'+detail.product_name }}
                              </el-tag>
                            </div>
                            <el-button
                                v-else
                                class="button-new-tag"
                                size="small"
                                @click="addOneProduct(index, indexd)"
                              >+ 添加产品</el-button>
                          </div>
                          <el-button style="margin-left:20px" type="danger" size="mini" @click.prevent="removeProduct(index,indexd)">删除</el-button>
                        </div>
                        <div style="display: flex;justify-content:center;margin-top:20px">
                          <el-button style="" type="primary" size="mini" @click.prevent="addDetailsProduct(index)">新增产品</el-button>
                        </div>
                      </div>
                    </div>
                    <el-button type="success"  size="mini" @click="addMeal">新增套餐</el-button>
                  </el-form-item>
                </el-col>
              </el-row>  
              <div class="footer">
                <el-form-item style="margin-top:30px;">
                <el-button
                  v-show="currentTab > 1"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmitUp"
                >上一步
                </el-button>
                <el-button
                  v-show="currentTab < 5"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmitNest('formValidate')"
                >下一步
                </el-button>
                <el-button
                  v-show="currentTab == '5' && $route.params.id"
                  :loading="loading"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmit('formValidate',false)"
                >保存
                </el-button>
                <el-button
                  v-show="currentTab == '5' || $route.params.id"
                  :loading="loading"
                  type="primary"
                  class="submission"
                  size="small"
                  @click="handleSubmit('formValidate',true)"
                >提交
                </el-button>
              </el-form-item>
              </div>
            </el-form>

        </el-card>
        <el-dialog :visible.sync="facilityShow" title="请选择景点设施" width="450px">
          <div>
            <div class="facility-list">
              <div class="facility-item" v-for="item in facilityList" @click="selectFac(item)">
                <img :src="item.image" class="facility-icon">
                <div class="facility-text">{{item.text}}</div>
              </div>
            </div>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="choseLocShow" title="请选择经纬度"  width="1000px">
          <div>
            <choseLoc @getLngLat="getLngLat"></choseLoc>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="modals" title="产品列表" class="paymentFooter" scrollable width="900px" :before-close="cancel">
          <goods-list ref="goodslist"  @getProduct="getProduct" @close="cancel" v-if="modals"></goods-list>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import choseLoc from '@/components/choseLoc'
  import goodsList from '../goodsList/index.vue';
  import {
 
  productGetTempKeysApi,
  searchLocByNameApi,
  scenicDetailApi,
  scenicSaveApi,
  getScenicLabelListApi
} from '@/api/product'
import {  onlineUpload } from '@/api/setting';
import SettingMer from '@/libs/settingMer';
import { getToken } from '@/utils/auth'
import { roterPre } from '@/settings'
  const defaultObj = {
        name: "",
        province:'',
        city: '',
        county: '',
        address: '',
        grade: '',
        rate:'',
        scenic_mobile:'',
        sort: 0,
        is_free: 0,
        cost: '',
        type_desc:'',
        gcj_lng_lat: '',
        image: "",
        slider_image: [],
        video_link: '',
        scenic_info:'',    
        scenic_address_lat_and_lng:'',
        scenic_address_name:'',
        short_address_name:"",
        trait:'',
        open_time:[],
        scenic_facility:[],
        
        special_policy:'',
        scenic_detail: '',
        to_scenic:'',
        scenic_park:'',
        notice:"",
        scenic_help:'',
        label_ids: [],
        mealList: [],
       
  }
  export default {
    name: "scenicAdd",
    components: {
      VueUeditorWrap,
      choseLoc,
      goodsList
    },
    data() {
      const url = SettingMer.https + '/upload/image/0/file?ueditor=1&token=' + getToken()
      return {
        myConfig: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 500, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器
          enableAutoSave: false,
          UEDITOR_HOME_URL: '/UEditor/',
          'serverUrl': url,
          'imageUrl': url,
          'imageFieldName': 'file',
          imageUrlPrefix: '',
          'imageActionName': 'upfile',
          'imageMaxSize': 2048000,
          'imageAllowFiles': ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
        },
        myConfig2: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 260, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器
          enableAutoSave: false,
          UEDITOR_HOME_URL: '/UEditor/',
          'serverUrl': url,
          'imageUrl': url,
          'imageFieldName': 'file',
          imageUrlPrefix: '',
          'imageActionName': 'upfile',
          'imageMaxSize': 2048000,
          'imageAllowFiles': ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
        },
        searTemp: '',
        currentTab: '1',
        headTab: [
            { title: '景点信息', name: '1' },
            { title: '温馨提示', name: '2' },
            { title: '信息介绍', name: '3' },
            { title: '景点详情', name: '4' },
            { title: '套餐配置', name: '5' }
        ],
        facilityList: [
          {
            text: '停车场',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-1.png'
          },
          {
            text: '手机充电',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-2.png'
          },
          {
            text: '行李寄存',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-3.png'
          },
          {
            text: '景区地图',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-4.png'
          },
          {
            text: '园内交通',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-5.png'
          },
          {
            text: '婴儿车租赁',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-6.png'
          },
          {
            text: '雨具租赁',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-7.png'
          },
          {
            text: '轮椅租赁',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-8.png'
          },
          {
            text: '卫生间',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-9.png'
          },
          {
            text: '母婴室',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-10.png'
          },
          {
            text: 'ATM机',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-11.png'
          },
          {
            text: '餐厅',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-12.png'
          },
          {
            text: '纪念品商店',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-13.png'
          },
          {
            text: '商店',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-14.png'
          },
          {
            text: '宠物禁止入园',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-15.png'
          },
          {
            text: '吸烟区',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-16.png'
          },
          {
            text: '免费wifi',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-17.png'
          },
          {
            text: '酒店',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-18.png'
          },
          {
            text: '可驾车入园',
            image: 'https://qiniu.gzyxly.cn/scenic/setting/jqss-19.png'
          },
        ],
        facilityShow: false,
        gradeList: [
          {
            label: '无',
            value: '' 
          },
          {
            label: '1A',
            value: '1' 
          },
          {
            label: '2A',
            value: '2' 
          },
          {
            label: '3A',
            value: '3' 
          },
          {
            label: '4A',
            value: '4' 
          },
          {
            label: '5A',
            value: '5' 
          }
        ],
        formValidate: Object.assign({}, defaultObj),
        fullscreenLoading: false,
        grid: {
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24
        },
        loading: false,
        ruleValidate: {
          name: [
            { required: true, message: '请输入景点名称', trigger: 'blur' }
          ],
          province: [
            { required: true, message: '请输入所属省', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请输入所属城市', trigger: 'blur' }
          ],
          county: [
            { required: true, message: '请输入所属地区', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
          // grade: [
          //   { required: true, message: '请选择平台分类', trigger: 'change' }
          // ],
          keyword: [
            { required: true, message: '请输入产品关键字', trigger: 'blur' }
          ],
          unit_name: [{ required: true, message: '请输入单位', trigger: 'blur' }],
          store_info: [
            { required: true, message: '请输入产品简介', trigger: 'blur' }
          ],
          temp_id: [
            { required: true, message: '请选择运费模板', trigger: 'change' }
          ],
          once_max_count: [
            { required: true, message: '请输入限购数量', trigger: 'change' }
          ],
          image: [{ required: true, message: '请上传产品图', trigger: 'change' }],
          slider_image: [
            {
              required: true,
              message: '请上传产品轮播图',
              type: 'array',
              trigger: 'change'
            }
          ]
        },
        upload: {
          videoIng: false // 是否显示进度条；
        },
        progress: 10, // 进度条默认0
        videoLink: '',
        choseLocShow: false,
        labelList: [], //分类
        flag: 0,
        modals: false,
        mealIndex: '',
        mealDetailIndex: '',
        mealList: [],
      };
    },
    watch: {
     
      '$route.params.id': {
        handler: function(nVal,oVal) {
          if (nVal !== oVal && nVal){
            this.initData();
          }
        },
        immediate: false,
        deep: true
      }
    },
    mounted() {
      this.initData();
      this.getLabelList()
    },
   
    methods: {
    selectLngLat(){
      this.choseLocShow = true;
    },
    getLngLat(e){
      console.log(11,e)
      this.formValidate.gcj_lng_lat = e;
      this.choseLocShow = false;
    },
      // 详情
    getInfo() {
      this.fullscreenLoading = true;
      scenicDetailApi({id: this.$route.params.id})
        .then(async res => {
          var data = res.data;
          this.fullscreenLoading = false;
          console.log('data',data)
          this.formValidate = data;
          this.mealList = data.scenicMeal;
          console.log('this.mealList',this.mealList)
          // this.formValidate.mealList = data.mealList? data.mealList:[];
          
          // this.formValidate.label_ids = data.label_ids ? info.label_ids.split(",").map(Number) : []

        })
        .catch(res => {
          this.fullscreenLoading = false;
          this.$message.error(res.message);
        });
    },
    initData(){
  
      this.formValidate.slider_image = []
      if (this.$route.params.id) {
        this.getInfo()
      }
      
    },

    getLabelList() {
      getScenicLabelListApi().then((res) => {
        this.labelList = res.data;
      })
      .catch(({ message }) => {
        this.$message.error(message)
      })
    },
    cancel () {
        this.modals = false;
        // this.tempGoods = {}
    },
    getProduct (data) {
          this.modals = false;
          this.mealList[this.mealIndex].details[this.mealDetailIndex].product_id = data.product_id;
          this.mealList[this.mealIndex].details[this.mealDetailIndex].product_name = data.store_name;
          this.flag++
          console.log(' this.mealList',this.mealList)
      },
      addOneProduct(index,indexd){
        this.mealIndex = index;
        this.mealDetailIndex = indexd;
        this.modals = true;
      },
      delOneProduct(index,indexd){
        this.mealList[index].details[indexd].product_id = '';
        this.mealList[index].details[indexd].product_name = '';
        this.flag++
        console.log(' this.mealList',this.mealList)
      },
        // 搜索
      querySearch(query, callback) {
        console.log('query',query)
        if(query){
          searchLocByNameApi({ keyword: query })
          .then(res => {
            callback(res.data)
          })
          .catch(res => {
            this.$message.error(res.message)
          })
        }
        
      },
      handleSelectStart(e){
        var that = this;
        // this.formValidate.name = e.pname?e.name:'';
        // this.formValidate.province = e.pname?e.pname:'';
        // this.formValidate.city = e.pname?e.cityname:'';
        // this.formValidate.county = e.adname?e.adname:'';
        // this.formValidate.address = e.address?e.address:'';
        // this.formValidate.type_desc = e.type?e.type:'';
        // this.formValidate.gcj_lng_lat = e.location?e.location:'';
        if(!this.formValidate.open_time && e.biz_ext &&e.biz_ext.opentime2 &&e.biz_ext.opentime2.length){
          this.formValidate.open_time =  e.biz_ext.opentime2
        }
        
        // 如果有照片
        if(e.photos.length){
          this.fullscreenLoading = true;
          var photos = [];
          for(var i =0; i< e.photos.length; i++ ){
            if(e.photos[i].url){
              photos.push(e.photos[i].url)
            }
          }
          if(photos.length){
            onlineUpload({ id: 18, images: photos })
            .then((res) => {
              var data = res.data;

              if(data.length){
                console.log('data',data)
                for(var i =0; i< data.length; i++ ){
                  if(i == 0 && !that.formValidate.image){
                    that.formValidate.image = data[i].path;
                  }
                  that.formValidate.slider_image.push(data[i].path)
                }
              }
              this.$message.success('上传图片成功');
              this.fullscreenLoading = false;
            })
            .catch((err) => {
              this.fullscreenLoading = false;
              this.$message.error(err.message);
            });
          }
          
        }
      },

      addDetailsProduct(index){
        this.mealList[index].details.push({
          scenic_product_name:'',
          product_name: '',
          product_id: '',
        })
        this.flag++
        console.log(' this.mealList',this.mealList.length)
      },
      removeProduct(index,indexd){
        if(indexd != 0){
          this.mealList[index].details.splice(indexd, 1)
          this.flag++
          console.log(' this.mealList',this.mealList)
        }
        
      },
      delMeal(index){
        this.mealList.splice(index, 1)
      },
      addMeal(){
        this.mealList.push({
          meal_name: '',
          details: [
            {
              scenic_product_name: '',
              product_name: '',
              product_id: '',
            }
          ],
        })
        this.flag++
        console.log(' this.mealList',this.mealList)
      },
      removeItem(item) {
        var index = this.formValidate.open_time.indexOf(item)
        if (index !== -1) {
          this.formValidate.open_time.splice(index, 1)
        }
      },
      addItem() {
        this.formValidate.open_time.push({
          date: '',
          time: '',
        })
      },
     
      handleRemove(i) {
        this.formValidate.slider_image.splice(i, 1);
      },
      // 点击产品图
      modalPicTap(tit, num, i) {
        const _this = this;
        const attr = [];
        this.$modalUpload(function(img) {
          if (tit === "1" && !num) {
            _this.formValidate.image = img[0];
          }
          if (tit === "2" && !num) {
            img.map(item => {
              attr.push(item.attachment_src);
              _this.formValidate.slider_image.push(item);
              if (_this.formValidate.slider_image.length > 10) {
                _this.formValidate.slider_image.length = 10;
              }
            });
          }
        }, tit);
      },


      // 移动
      handleDragStart(e, item) {
        this.dragging = item;
      },
      handleDragEnd(e, item) {
        this.dragging = null;
      },
      handleDragOver(e) {
        e.dataTransfer.dropEffect = "move";
      },
      handleDragEnter(e, item) {
        e.dataTransfer.effectAllowed = "move";
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate.slider_image];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.slider_image = newItems;
      },
      // 删除视频；
      delVideo() {
        const that = this
        that.$set(that.formValidate, 'video_link', '')
      },
      zh_uploadFile() {
        if (this.videoLink) {
          this.formValidate.video_link = this.videoLink
        } else {
          this.$refs.refid.click()
        }
      },
      zh_uploadFile_change(evfile) {
        const that = this
        that.progress = 10
        const suffix = evfile.target.files[0].name.substr(
          evfile.target.files[0].name.lastIndexOf('.')
        )
        if (suffix !== '.mp4') {
          return that.$message.error('只能上传MP4文件')
        }
        productGetTempKeysApi().then(res => {
          that.$videoCloud
          .videoUpload({
            type: res.data.type,
            evfile: evfile,
            res: res,
            uploading(status, progress) {
              that.upload.videoIng = status
            }
          })
          .then(res => {
            that.formValidate.video_link = res.url || res.data.src
            that.$message.success('视频上传成功')
            that.progress = 100
          })
          .catch(res => {
            that.upload.videoIng = false
            that.$message.error(res.msg&&res.msg.message || res.message)
          })
        })
      },
      addFac() {
        this.facilityShow = true;
        // this.formValidate.scenic_facility.push({
        //   image: '',
        //   text: '',
        // })
      },
      selectFac(item){
        this.formValidate.scenic_facility.push(item);
        this.facilityShow = false;
      },
      
      removeItemFac(item) {
        var index = this.formValidate.scenic_facility.indexOf(item)
        if (index !== -1) {
          this.formValidate.scenic_facility.splice(index, 1)
        }
      },

      handleSubmitUp() {
        this.currentTab = (Number(this.currentTab) - 1).toString();
      },
      handleSubmitNest(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.currentTab = (Number(this.currentTab) + 1).toString();
          }
        });
      },

      // 提交
      handleSubmit(name, is_return) {
 
        var isCheclFalse = false;
      
        if(this.mealList.length){
          console.log('this.mealList',this.mealList.length)
          for(var i = 0; i < this.mealList.length; i++){
            if(!this.mealList[i].meal_name){
              isCheclFalse = true;
              break;
            }
            if(!this.mealList[i].details.length){
              isCheclFalse = true;
              break;
            }
            for (let j = 0; j < this.mealList[i].details.length; j++) {
              if(!this.mealList[i].details[j].product_id){
                isCheclFalse = true;
                 break;
              }
              if(!this.mealList[i].details[j].product_name){
                isCheclFalse = true;
                 break;
              }
              if(!this.mealList[i].details[j].scenic_product_name){
                isCheclFalse = true;
                 break;
              }
              
            }
          }
        }
        if(isCheclFalse == true){
          return this.$message.error("请完善套餐表单");
        }
        
        this.formValidate.mealList = this.mealList;
        
        this.$refs[name].validate(valid => {
          if (valid) {
            this.fullscreenLoading = true;
            this.loading = true;
            let disCreate = this.$route.params.id && !this.$route.query.type;
            disCreate
              ? scenicSaveApi(this.$route.params.id, this.formValidate)
                  .then(async res => {
                    this.fullscreenLoading = false;
                    this.$message.success('保存成功');
                    if(is_return){
                      this.$router.push({ name:  "ProductScenic" });
                      this.$refs[name].resetFields();
                      this.formValidate.slider_image = [];
                    }
                    
                    
                    this.loading = false;
                  })
                  .catch(res => {
                    this.fullscreenLoading = false;
                    this.loading = false;
                    this.$message.error(res.message);
                  })
              : scenicSaveApi('',this.formValidate)
                  .then(async res => {
                    this.fullscreenLoading = false;
                    this.$message.success('保存成功');
                    if(is_return){
                      this.$router.push({ name:  "ProductScenic" });
                      this.$refs[name].resetFields();
                      this.formValidate.slider_image = [];
                    }
                    this.loading = false;
                  })
                  .catch(res => {
                    this.fullscreenLoading = false;
                    this.loading = false;
                    this.$message.error(res.message);
                  });
          } else {
            if (!this.formValidate.name.trim()) {
              return this.$message.warning("基本信息-产品名称不能为空");
            }
      
            if (!this.formValidate.image) {
              return this.$message.warning("基本信息-封面图不能为空");
            }
            if (this.formValidate.slider_image.length < 0) {
              return this.$message.warning("基本信息-轮播图不能为空");
            }
          }
        });
      },
          // 添加自定义弹窗
      addCustomDialog(editorId) {
        window.UE.registerUI(
          "test-dialog",
          function(editor, uiName) {
            // 创建 dialog
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: roterPre + "/admin/widget/image?field=dialog",
              editor: editor,
              name: uiName,
              title: "上传图片",
              cssRules: "width:1200px;height:500px;padding:20px;"
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "dialog-button",
              title: "上传图片",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
              onclick: function() {
                // 渲染dialog
                dialog.render();
                dialog.open();
              }
            });
            return btn;
          },
          37
        );
        window.UE.registerUI(
          "video-dialog",
          function(editor, uiName) {
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: roterPre + "/admin/widget/video?fodder=video",
              editor: editor,
              name: uiName,
              title: "上传视频",
              cssRules: "width:600px;height:420px;padding:10px 20px 20px;"
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "video-button",
              title: "上传视频",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
              onclick: function() {
                // 渲染dialog
                dialog.render();
                dialog.open();
              }
            });
            return btn;
          },
          38
        );
      }
      },
  };
  </script>
  
  <style scoped lang="scss">
  .bg {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
  }
  .goods_detail .goods_detail_wrapper {
    z-index: -10;
  }
  .iframe-box{
    min-height: 300px;
  }
  ::v-deep .specsList th{
    line-height: 20px!important;
  }
  ::v-deep .upLoadPicBox {
    .upLoad {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -o-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      line-height: 20px;
    }
    span {
      font-size: 10px;
    }
  }
  .proCoupon ::v-deep .el-form-item__content {
    margin-top: 5px;
  }
  .tabPic {
    width: 40px !important;
    height: 40px !important;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .noLeft ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
  .explanation{
    color: #909399;
  }
  .tabNumWidth ::v-deep .el-input-number--medium {
    width: 100px;
  }
  .tabNumWidth ::v-deep .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  .tabNumWidth ::v-deep .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  .tabNumWidth ::v-deep .el-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }
  .tabNumWidth ::v-deep .el-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  .priceBox ::v-deep .el-input__inner {
    padding-right: 15px;
  }
  .el-input-number.is-controls-right .el-input__inner{
    padding-right: 15px !important;
  }
  .tabNumWidth ::v-deep .priceBox .el-input-number__decrease,
  .tabNumWidth ::v-deep .priceBox .el-input-number__increase{
    display: none;
  }
  .tabNumWidth ::v-deep .priceBox.el-input-number--small{
    width: 90px!important;
  }
  .tabNumWidth ::v-deep .el-select {
    width: 120px;
  }
  .tabNumWidth ::v-deep thead {
    line-height: normal !important;
  }
  .tabNumWidth ::v-deep .cell {
    line-height: normal !important;
    text-overflow: clip !important;
  }
  .seeCatMy {
    color: var(--prev-color-primary);
    cursor: pointer;
  }	
  .selectOn{
    color: var(--prev-color-primary);
  }	
  .virtual_boder {
    border: 1px solid var(--prev-color-primary);
  }
  .virtual_boder2 {
    border: 1px solid #e7e7e7;
  }
  .virtual_san {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid var(--prev-color-primary);
    border-left: 26px solid transparent;
  }
  .virtual_dui {
    position: absolute;
    bottom: -2px;
    right: 2px;
    color: #ffffff;
    font-family: system-ui;
  }
  .virtual {
    width: 120px;
    height: 60px;
    background: #ffffff;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    padding-top: 8px;
    position: relative;
    cursor: pointer;
    line-height: 23px;
    .virtual_top {
      font-size: 14px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }
    .virtual_bottom {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }
  .virtual:nth-child(2n) {
    margin: 0 12px;
  }
  .desc{
    color: #999999;
    font-size: 12px;
  }
  .addfont {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    color: var(--prev-color-primary);
    margin-left: 14px;
    cursor: pointer;
  }
  .titTip {
    display: inline-bolck;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
  .addCustom_content {
    margin-top: 20px;
    .custom_box {
      margin-bottom: 10px;
    }
  }
  .addCustomBox {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 400;
    color: var(--prev-color-primary);
    .btn {
      cursor: pointer;
      width: max-content;
    }
    .remark {
      display: flex;
      margin-top: 14px;
    }
  }
  .pageWidth {
    width: 460px;
  }
  .ml15 {
    margin-left: 15px;
  }
  .button-new-tag {
    height: 28px;
    line-height: 26px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .iview-video-style {
    width: 40%;
    height: 180px;
    border-radius: 10px;
    background-color: #707070;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
  }
  .iconv {
    color: #fff;
    line-height: 180px;
    display: inherit;
    font-size: 26px;
    position: absolute;
    top: -74px;
    left: 50%;
    margin-left: -25px;
  }
  .iview-video-style .mark {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }
  .uploadVideo {
    margin-left: 10px;
  }
  .perW50 {
    width: 50%;
  }
  .submission {
    margin-left: 10px;
  }
  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
  .labeltop ::v-deep .el-form-item__label {
    float: none !important;
    display: inline-block !important;
    margin-left: 120px !important;
    width: auto !important;
  }
  ::v-deep .upload-form-coupon{
    width: 900px!important;
  }
  .idcard-tip{
    width: 50px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    background-color: #e0eff5;
    color: #6898ff;
    text-align: center;
    margin-right: 10px;
    border-radius: 5px;
    padding: 0 2px;
  }  

 .facility-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 12px;
    padding-right: 4px
}

.facility-list .facility-item {
    flex-basis: calc((100% - 8px - 32px)/5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    padding-top: 12px;
    padding-bottom: 8px;
    margin-right: 20px
}



.facility-list .facility-item .facility-icon {
    width: 20px;
    height: 20px;
    background: #fff
}

.facility-list .facility-item .facility-text {
    font-size: 11px;
    color: #111;
    line-height: 12px;
    text-align: center;
    margin-top: 2px
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    -webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
}
  </style>
  